<template>
    <el-drawer v-model="visible" :title="moduleInfo.moduleName"  size="40%" :append-to-body="true" :show-close="false" @close="validData()">
        
        <template #header="{ close, titleId, titleClass }">
          <h4 :id="titleId" :class="titleClass">{{moduleInfo.moduleName}}</h4>
          <el-button type="danger" @click="close">
            <el-icon><Delete /></el-icon>
          </el-button>
        </template>
    
        <el-form ref="dataFormRef" :model="dataForm" label-position="top">

            <el-form-item prop="serverGroupId" label="服务分组" 
                        :rules="{
                                required: true,
                                message: '服务分组不能为空',
                                trigger: 'change',}">

                <el-select v-model="dataForm.serverGroupId" placeholder=" 请选择待部署的服务器" style="width: 250px;">
							<el-option
							v-for="item in clusterGroupList"
							:key="item.id"
							:label="item.name"
							:value="item.id"
                            
							/>
	            </el-select>

            </el-form-item>
            
            
        </el-form>
    </el-drawer>
    </template>
    
    <script setup lang="ts">
    import { reactive, ref,onMounted } from 'vue'
    import { getRequest,postReq } from '@/utils/request'
    import uri from '@/api/uri'
   
    const visible = ref(false)
    const dataFormRef = ref()
    const moduleInfo = ref<any>({})
    const clusterGroupList = ref()
    const dataForm = reactive({
        serverGroupId:'',
    })
    
    
    const init =(item:any) => {
        moduleInfo.value = item
        getClusterGroup()
        visible.value = true
    }
    
    
    
    const validData = async () => {
    await  dataFormRef.value.validate((valid: boolean) => {
            if(!valid){
                moduleInfo.value.isValid = false
            }else{
                moduleInfo.value.isValid = true
                moduleInfo.value.moduleContent = JSON.stringify(dataForm)
            }
            return moduleInfo.value.isValid
        })
    }

    const getClusterGroup = ()=>{
    getRequest(uri.getServerGroup).then(res =>{
        clusterGroupList.value = res.data
    })
}
    
    defineExpose({
        init,validData
    })
    </script>